<template>
    <div class="page has-navbar store">
        <div class="page-content">
            <div class="btn">
                <button @click.stop="nowDataType='SEVEN'" :class="nowDataType=='SEVEN'?'active':''">最近7天</button>
                <button @click.stop="nowDataType='FIFTEEN'" :class="nowDataType=='FIFTEEN'?'active':''">最近15天</button>
                <button @click.stop="nowDataType='THIRTY'" :class="nowDataType=='THIRTY'?'active':''">最近30天</button>
            </div>
            <h4 class="tit"><b>金额</b></h4>
            <!-- <h4 class="tit">{{day[nowDataType]}}日数据:<b>{{xAxisData[0]}}~{{xAxisData[xAxisData.length-1]}}</b></h4> -->
            <div class="chartLine" id="chartLineSeven"></div>
            <!-- <h4 class="tit">15日数据:<b>{{xAxisDataForFif[0]}}~{{xAxisDataForFif[xAxisDataForFif.length-1]}}</b></h4>
            <div class="chartLine" id="chartLineFif"></div>
            <h4 class="tit">30日数据:<b>{{xAxisDataForThi[0]}}~{{xAxisDataForThi[xAxisDataForThi.length-1]}}</b></h4>
            <div class="chartLine" id="chartLineThi"></div> -->
        </div>
    </div>
</template>

<script>
import echarts from 'echarts';
import _ from 'lodash'
export default {
    props: ['storeId'],
    data(){
        return {
            day:{
              "SEVEN":7,
              "FIFTEEN":15,
              "THIRTY":30
            },
            nowDataType:'SEVEN',
            legendData:[],
            seriesData:[],
            xAxisData:[],
            xAxisDataForFif:[],
            xAxisDataForThi:[],
        }
    },
    watch: {
        nowDataType(val){
            this.getData(val);
        }
    },
    methods:{
        getData(val){
            this.$http({
                url:"get-day",
                method:"GET",
                params:{
                    storeId:this.storeId,
                    type:val,
                }
            }).then(res=>{
                if(res.data.code == 200){
                    if(res.data.data.length){
                        let data = res.data.data;
                        let legendData = [];
                        let xAxisData = [];
                        let seriesData = [];
                        // 筛选分类数据和日期
                        for(let i=0;i<data.length;i++){
                            xAxisData.push(data[i].date);
                            for(let j=0;j<data[i].list.length;j++){
                                if(legendData.length){
                                    let flag = false;
                                    for(let y=0;y<legendData.length;y++){
                                        if(legendData[y]==data[i].list[j].typeName){
                                            flag = true;
                                        }
                                    }
                                    if(!flag){
                                        legendData.push(data[i].list[j].typeName)
                                    }
                                }else{
                                    if(data[i].list[j]){
                                        legendData.push(data[i].list[j].typeName)
                                    }
                                }
                            }
                        }
                        // 按照分类来筛选每个分类的具体时间销售金额
                        for(let i=0;i<legendData.length;i++){
                            let obj = {
                                name:legendData[i],
                                type:"line",
                                // stack: '总量',
                                data:[],
                            }
                            seriesData.push(obj);
                        }
                        // // 重新整理数据
                        let newData = [];
                        for(let i=0;i<data.length;i++){
                            if(data[i].list.length){
                                let obj = {
                                    date:data[i].date,
                                    list:[]
                                }
                                for(let x=0;x<seriesData.length;x++){
                                    for(let j=0;j<data[i].list.length;j++){
                                        if(seriesData[x].name == data[i].list[j].typeName){
                                            obj.list.push({
                                                amount:data[i].list[j].amount,
                                                date: "",
                                                id: 0,
                                                qty: data[i].list[j].qty,
                                                storeId: "",
                                                typeName: seriesData[x].name,
                                            });
                                        }
                                    }
                                }
                                newData.push(obj);
                            }else{
                                let obj = {
                                    date:data[i].date,
                                    list:[]
                                }
                                for(let x=0;x<seriesData.length;x++){
                                    obj.list.push({
                                        amount:0,
                                        date: "",
                                        id: 0,
                                        qty: 0,
                                        storeId: "",
                                        typeName: seriesData[x].name,
                                    });
                                } 
                                newData.push(obj);
                            }
                            
                        }
                        console.log(newData);
                        // return;
                        for(let i=0;i<seriesData.length;i++){
                            for(let j=0;j<data.length;j++){
                                for(let x=0;x<data[j].list.length;x++){
                                    if(seriesData[i].name == data[j].list[x].typeName){
                                        seriesData[i].data.push(`${data[j].list[x].amount}`);
                                    }
                                }
                            }
                        }
                        // for(let i=0;i<seriesData.length;i++){
                        //     for(let j=0;j<newData.length;j++){
                        //         for(let x=0;x<newData[j].list.length;x++){
                        //             if(seriesData[i].name == newData[j].list[x].typeName){
                        //                 seriesData[i].data.push(`${newData[j].list[x].amount}`);
                        //             }
                        //         }
                        //     }
                        // }
                        console.log("分类数据：")
                        console.log(legendData)
                        console.log("日期数据：")
                        console.log(xAxisData)
                        console.log("数据：")
                        console.log(seriesData)
                        // if(val=="SEVEN"){
                            this.legendData = legendData;
                            this.seriesData = seriesData;
                            this.xAxisData = xAxisData;
                            this.darwLineSeven(legendData,xAxisData,seriesData);
                        // }else if(val=="FIFTEEN"){
                        //     this.xAxisDataForFif = xAxisData;
                        //     this.darwLineFif(legendData,xAxisData,seriesData);
                        // }else if(val=="THIRTY"){
                        //     this.xAxisDataForThi = xAxisData;
                        //     this.darwLineThi(legendData,xAxisData,seriesData);
                        // }
                    }
                }
            });
        },
        darwLineSeven(legendData,xAxisData,seriesData){
            let newXAxisData = [];
            for(let i=0;i<xAxisData.length;i++){
                let date = new Date(xAxisData[i]).Format("MM-dd");
                newXAxisData.push(date)
            }
            echarts.init(document.getElementById('chartLineSeven')).setOption({
                tooltip: {
                    trigger: 'axis',
                    confine:true,
                    formatter:  (params) => {  // params为悬浮框上的全部数据
                        console.log(params);
                        // return;
                        const newParams = [];
                        
                        let paramsData = _.sortBy(params, 'value'); // 根据value值升序，_.sortBy为lodash的方法
                        console.log(paramsData)
                        paramsData = _.reverse(paramsData);  // 将数据降序，_.reverse为lodash的方法

                        paramsData.sort((a,b)=>{
                            return Number(b.value) - Number(a.value)
                        })

                        paramsData.forEach((p) => {
                            // p.marker为对应数据线的颜色的圆点 
                            // p.seriesName为对应数据的数据名称
                            // p.value为对应数据的值
                            const cont = p.marker + ' ' + p.seriesName + ': ' + p.value + ' 元<br/>';
                            newParams.push(cont);
                        });
                        return _.join(newParams, '');  // 这里是需要将数组转化成字符串显示，如果不转化，每个数据前面都会出现一个逗号（，），_.join为lodash的方法
                    }
                },
                color: ["#ff9494", "#72f6c6", "#769aff","#7c2222","#6c57d9","#261095","#7c5708","#f1a80b","#42cf7e","#3b5245","#de3b0f","#4e3e08","#df4aa5","#c852bc","#230f62","#8d0d40","#542200","#b44b06","#f94e62","#000000"],
                legend: {
                    type:"scroll",
                    data: legendData,
                    bottom: 0,
                    itemHeight: 5
                },
                grid: {
                    left: '3%',
                    right: '5%',
                    bottom: '17%',
                    top: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: newXAxisData,
                    axisLine: {
                        show: true, 
                        lineStyle: {
                            color: "#ddd"
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#444"
                        }
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        splitLine: {
                            show:true,
                            lineStyle: {
                                type: 'dashed',
                                color: '#ddd'
                            }
                        },
                        axisLine: {
                            show: false, 
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#444",
                                fontSize: 12
                            }
                        }
                    }
                ],
                series:seriesData
            });
        },
        // darwLineFif(legendData,xAxisData,seriesData){
        //     let newXAxisData = [];
        //     for(let i=0;i<xAxisData.length;i++){
        //         let date = new Date(xAxisData[i]).Format("MM-dd");
        //         newXAxisData.push(date)
        //     }
        //     echarts.init(document.getElementById('chartLineFif')).setOption({
        //         tooltip: {
        //             trigger: 'axis',
        //             confine:true
        //         },
        //         color:['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
        //         legend: {
        //             type:"scroll",
        //             data: legendData,
        //             bottom: 0,
        //             itemHeight: 5
        //         },
        //         grid: {
        //             left: '3%',
        //             right: '5%',
        //             bottom: '17%',
        //             top: '10%',
        //             containLabel: true
        //         },
        //         xAxis: {
        //             type: 'category',
        //             boundaryGap: false,
        //             data: newXAxisData,
        //             axisLine: {
        //                 show: true, 
        //                 lineStyle: {
        //                     color: "#ddd"
        //                 }
        //             },
        //             axisTick: {
        //                 show: false
        //             },
        //             axisLabel: {
        //                 show: true,
        //                 textStyle: {
        //                     color: "#444"
        //                 }
        //             }
        //         },
        //         yAxis: [
        //             {
        //                 type: 'value',
        //                 splitLine: {
        //                     show:true,
        //                     lineStyle: {
        //                         type: 'dashed',
        //                         color: '#ddd'
        //                     }
        //                 },
        //                 axisLine: {
        //                     show: false, 
        //                 },
        //                 axisTick: {
        //                     show: false
        //                 },
        //                 axisLabel: {
        //                     textStyle: {
        //                         color: "#444",
        //                         fontSize: 12
        //                     }
        //                 }
        //             }
        //         ],
        //         series: seriesData
        //     });
        // },
        // darwLineThi(legendData,xAxisData,seriesData){
        //     let newXAxisData = [];
        //     for(let i=0;i<xAxisData.length;i++){
        //         let date = new Date(xAxisData[i]).Format("MM-dd");
        //         newXAxisData.push(date)
        //     }
        //     echarts.init(document.getElementById('chartLineThi')).setOption({
        //         tooltip: {
        //             trigger: 'axis',
        //             confine:true
        //         },
        //         color:['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
        //         legend: {
        //             type:"scroll",
        //             data: legendData,
        //             bottom: 0,
        //             itemHeight: 5
        //         },
        //         grid: {
        //             left: '3%',
        //             right: '5%',
        //             bottom: '17%',
        //             top: '10%',
        //             containLabel: true
        //         },
        //         xAxis: {
        //             type: 'category',
        //             boundaryGap: false,
        //             data: newXAxisData,
        //             axisLine: {
        //                 show: true, 
        //                 lineStyle: {
        //                     color: "#ddd"
        //                 }
        //             },
        //             axisTick: {
        //                 show: false
        //             },
        //             axisLabel: {
        //                 show: true,
        //                 textStyle: {
        //                     color: "#444"
        //                 }
        //             }
        //         },
        //         yAxis: [
        //             {
        //                 type: 'value',
        //                 splitLine: {
        //                     show:true,
        //                     lineStyle: {
        //                         type: 'dashed',
        //                         color: '#ddd'
        //                     }
        //                 },
        //                 axisLine: {
        //                     show: false, 
        //                 },
        //                 axisTick: {
        //                     show: false
        //                 },
        //                 axisLabel: {
        //                     textStyle: {
        //                         color: "#444",
        //                         fontSize: 12
        //                     }
        //                 }
        //             }
        //         ],
        //         series: seriesData
        //     });
        // }
    },
    created: function () {
        if ( !localStorage.getItem('token') ) {
            this.$router.push('/login');
            return;
        }
    },
    mounted(){
        setTimeout(() => {
            this.getData("SEVEN");
        }, 100);
        // setTimeout(() => {
        //     this.getData("FIFTEEN");
        // }, 200);
        // setTimeout(() => {
        //     this.getData("THIRTY");
        // }, 300);
        // // this.darwLineSeven();
    }
}
</script>
<style lang="scss" scoped>
    @import "salesHot";
</style>
